<template>
  <div>
    <div class="wrapper">
      <div class="wrapper activities">
        <div class="activity-card-list">
          <div class="top-title">
            <h4 class="latest">最新活动</h4>
            <div class="clearfix"></div>
          </div>
          <div class="activity-list" v-infinite-scroll="loadMore()">
            <ul class="activity">
              <li class="activity-item" v-for="(item,index) in items" :key="index">
                <div class="activity-inner">
                  <a href="http://"></a>
                  <div class="img">
                    <a :href="'/gathering/item/'+item.id" target="_blank">
                      <img :src="item.image" alt>
                    </a>
                  </div>
                  <div class="text">
                    <p class="title">{{item.name}}</p>
                    <div class="fl goin">
                      <p>时间:{{item.starttime}}</p>
                      <p>城市:{{item.city}}</p>
                    </div>
                    <div class="fr btn">
                      <span class="sui-btn btn-bao">立即报名</span>
                    </div>
                    <div class="clearfix"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "~/assets/css/page-sj-activity-index.css";
import gatheringApi from "@/api/gathering";
export default {
  asyncData() {
   return  gatheringApi.getListByPage(1, 12, { state: "1" }).then(resp => {
      return { items: resp.data.data.rows};
    });
  },
  data () {
    return {
      //用来记录瀑布流页码号
      pageNo: 1
    }
  },
  methods: {
    loadMore(){
      this.pageNo++;
      gatheringApi.getListByPage(this.pageNo, 12, { state: "1" }).then(resp => {
      this.items=this.items.concat( resp.data.data.rows);
     })
    }
  }
};
</script>
